Skip to content
lab components / Actions and controls

Copy button

Enable users to instantly copy text or content to their clipboard with a single click.

ExamplesBasic UsageCustom Tooltip PlacementWith IconPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { CopyButton } from "@siteimprove/fancylab";

#Examples

#Basic Usage

A standard button labeled "Copy" (not localized). Ideal for short, inline content where the copy action is self-evident. For example, use this variant to copy a sharable link within an action bar. The tooltip defaults to appearing above the button.

Interaction:

  • Default: No tooltip.
  • Hover: Tooltip: "Click to copy".
  • Click: Content copied, tooltip: "Copied!".
  • Post-Click: Button and tooltip return to default.
<CopyButton toCopy={"Text to be copied"} tooltip="Click to copy" tooltipCopied="Copied!"> Copy </CopyButton>

#Custom Tooltip Placement

Copy Buttons display feedback in a tooltip. The tooltip is not fixed to the button. Customize its position to ensure it's always fully visible, especially in areas with limited space above the button.

<CopyButton variant="primary" toCopy="Text to be copied" tooltip="Click to copy" tooltipCopied="Copied!" tooltipPlacement="right" > Copy </CopyButton>

#With Icon

The button displays a customizable copy icon (e.g., two overlapping squares) instead of text. Helpful when space is limited, or for visual emphasis of the copy action.

<CopyButton variant="borderless" toCopy="Text to be copied" tooltip="Click to copy" tooltipCopied="Copied!" > <Icon> <IconCopy /> </Icon> </CopyButton>

#Properties

PropertyDescriptionDefinedValue
toCopyRequired
string
tooltipRequired
string
tooltipCopiedRequired
string
childrenOptional
element
tooltipPlacementOptional
"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"
variantOptional
"borderless" | "ctaDefault" | "ctaPrimary" | "ctaSecondary" | "default" | "destructive" | "primary" | "secondary"
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Guidelines

#Best practices

#General

Use CopyButton when

  • Users need to quickly duplicate text or data.
  • The content to copy is not easily selectable (e.g., within a disabled field).
  • You want to provide a clear, intuitive copy mechanism.

#Placement

CopyButton is typically used in the following places:

  • Inline: Place the button immediately adjacent to the content it copies.
  • Custom: Position the button where it's easily discoverable but doesn't obstruct the main content, (e.g., in an Action Bar).

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your CopyButton to existing components for visual consistency.

#Do not use when

  • Content is easily selectable.
  • Copying would disrupt the user's flow.

#Accessibility

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

  • No text content needed in the button itself; tooltips handle communication.